<template>
    <el-container class="main" >
      <el-aside width="35%"  id="aside" >
        <HomeLeft />
      </el-aside>
      <el-container id="right" class="right"  >
         <!-- <transition name="el-zoom-in-top"> -->
        <transition name="el-fade-in-linear">
            <router-view class="transition-box"/>
        </transition>
       
      </el-container>
    </el-container>
</template>

<script>
import { defineComponent, onMounted,onUpdated } from 'vue'
import HomeLeft from '../components/HomeLeft'
import HomeRight from '../components/HomeRight'

export default defineComponent({
  name:'Home',
  components: { HomeLeft, HomeRight },
  setup(){
    const arrImg = [
      {
         masking: require('../assets/overlay-lba-x2.png'),
         backImg: require('../assets/background1.jpg'),
      },
      {
         masking: require('../assets/overlay-lba-x2.png'),
         backImg: require('../assets/background2.jpg'),
      },
      {
         masking: require('../assets/overlay-lba-x2.png'),
         backImg: require('../assets/background3.jpg'),
      },
      {
         masking: require('../assets/overlay-lba-x2.png'),
         backImg: require('../assets/background4.jpg'),
      },
    ]
    let elAside
    let rightId
    onMounted(()=>{
      elAside = document.getElementById('aside')
      rightId = document.getElementById('right')
      changeImg(elAside)
      windowAddMouseWheel(rightId,elAside)
    })

    onUpdated(()=>{
      windowAddMouseWheel(rightId,elAside)
    })
    //定时更改背景图
    let img = new Image()
    function changeImg(ele){
      let index = 0
      setInterval(() => {
        index > 3 ? index = 0 : null
        img.src =  arrImg[index]['backImg']
        //等待图片加载完成后在切换-->解决白屏问题
        img.onload = function () {
          ele.style.backgroundImage = `url(${arrImg[index]['backImg']}),url(${arrImg[index]['masking']})`
          index++
        }
      }, 10000);
    }

    //控制左侧背景图跟随右侧界面滚动而滚动
    function windowAddMouseWheel(rightId,elAside) {
      console.log(rightId,elAside)
      //图片偏移数
      let count = 0
	    var scrollFunc = function (e) {
        e = e || window.event;
        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
          if (e.wheelDelta > 0) { //当滑轮向上滚动时
            if (count ==  0 ) return
            elAside.style.backgroundPositionY = `${count+=4}px`
          }
          if (e.wheelDelta < 0) { //当滑轮向下滚动时
            if ( count < -250 ) return
            elAside.style.backgroundPositionY = `${count-=4}px`

          }
        } else if (e.detail) {  //Firefox滑轮事件
          if (e.detail> 0) { //滑轮向下滚动时
            if ( count < -250 ) return
            elAside.style.backgroundPositionY = `${count-=4}px`
          }
          if (e.detail< 0) { //滑轮向上滚动时
            if (count === 0 ) return
            elAside.style.backgroundPositionY = `${count+=4}px`
          }
        }
      };

      //给页面绑定滑轮滚动事件
      if (document.addEventListener) { //火狐使用DOMMouseScroll绑定
        rightId.addEventListener('DOMMouseScroll', scrollFunc, false);
      }
        //其他浏览器直接绑定滚动事件
       rightId.onmousewheel = scrollFunc;
    }
		
    return {

    }
  }

})
</script>


<style lang="less"  scoped>
.main{
  width: 100%;
  .el-aside{
    position: fixed;
    overflow-y: scroll;
    height: 100%;
    background-image: url('../assets/background3.jpg'),url('../assets/overlay-lba-x2.png');
    background-repeat: repeat,no-repeat;
    transition: all 3s;
    -ms-overflow-style: none;
    scrollbar-width: none
  }
  
  .el-aside::-webkit-scrollbar {
    display: none;
  }

  #right{
    transition: all 3s;
  }
  .right{
    position: fixed;
    overflow-y: scroll;
    height: 100%;
    right: 0;
    width: 65%;
    background: rgba(202, 201, 208, 0.13);
  }
  //淡入淡出
  .transition-box {
    border-radius: 4px;
    box-sizing: border-box;
  }

}


</style>